<template>
  <div class="meMain">
    <div class="topdiv">
      <div @click="goLogin">
        <nut-avatar bg-icon :bg-image="user.Avatar"></nut-avatar>
        <span>{{ user.nikeName }}</span>
      </div>
      <p @click="tuichu">退出</p>
      <nut-dialog title="确定退出？" :visible="dialogShow" @ok-btn-click="onOkBtn" @cancel-btn-click="dialogShow=false" @close="dialogShow=false"></nut-dialog>
    </div>
    <div style="height: 25px"></div>
    <div class="headerBe"></div>

    <div class="shMain nut-tabbar">

      <a class="tabbar-nav card">
        <nut-badge :value="otherData.fk" class="item">
       <span class="icon-box">
        <svg t="1608184459458" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5045" width="15" height="15"><path d="M822 892H202c-60.7 0-110-49.3-110-110V242c0-60.7 49.3-110 110-110h620c60.7 0 110 49.3 110 110v540c0 60.7-49.3 110-110 110zM202 192c-27.6 0-50 22.4-50 50v540c0 27.6 22.4 50 50 50h620c27.6 0 50-22.4 50-50V242c0-27.6-22.4-50-50-50H202z"
            p-id="5046"></path><path d="M932 642H642c-71.7 0-130-58.3-130-130s58.3-130 130-130h290v260zM642 442c-38.6 0-70 31.4-70 70s31.4 70 70 70h230V442H642z"
            p-id="5047"></path><path d="M612 512a30 30 0 1 0 60 0 30 30 0 1 0-60 0z" p-id="5048"></path></svg>
        <span class="tabbar-nav-word">待付款</span>
       </span></nut-badge>
      </a>

      <a class="tabbar-nav card">
        <nut-badge :value="otherData.sh" class="item">
      <span class="icon-box"><!---->
       <svg t="1608184553310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1404" width="15" height="15"><path d="M322 892c-60.7 0-110-49.3-110-110s49.3-110 110-110 110 49.3 110 110-49.3 110-110 110z m0-160c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z m380 160c-60.7 0-110-49.3-110-110s49.3-110 110-110 110 49.3 110 110-49.3 110-110 110z m0-160c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"
           p-id="1405"></path><path d="M232 812h-70c-18.7 0-36.3-7.3-49.5-20.5C99.3 778.3 92 760.7 92 742V462.4c0-11 2.6-22 7.6-31.8s12.3-18.4 21.2-24.8l187.1-136c1.3-0.9 2.3-2.1 3-3.5 0.7-1.4 1.1-2.9 1.1-4.5V202c0-18.7 7.3-36.3 20.5-49.5 13.2-13.2 30.8-20.5 49.5-20.5h170c16.6 0 30 13.4 30 30s-13.4 30-30 30H382c-1.5 0-4.5 0.4-7.1 2.9-2.5 2.5-2.9 5.5-2.9 7.1v59.6c0 11-2.6 22-7.6 31.8s-12.3 18.4-21.2 24.8l-187.1 136c-1.3 0.9-2.3 2.1-3 3.5-0.7 1.4-1.1 2.9-1.1 4.5V742c0 1.5 0.4 4.5 2.9 7.1 2.5 2.5 5.5 2.9 7.1 2.9h70c16.6 0 30 13.4 30 30s-13.4 30-30 30z"
           p-id="1406"></path><path d="M862 812h-70c-16.6 0-30-13.4-30-30s13.4-30 30-30h70c1.5 0 4.5-0.4 7.1-2.9 2.5-2.5 2.9-5.5 2.9-7.1V202c0-1.5-0.4-4.5-2.9-7.1-2.5-2.5-5.5-2.9-7.1-2.9H512c-16.6 0-30-13.4-30-30s13.4-30 30-30h350c18.7 0 36.3 7.3 49.5 20.5 13.2 13.2 20.5 30.8 20.5 49.5v540c0 18.7-7.3 36.3-20.5 49.5-13.2 13.2-30.8 20.5-49.5 20.5z m-240 0H402c-16.6 0-30-13.4-30-30s13.4-30 30-30h220c16.6 0 30 13.4 30 30s-13.4 30-30 30zM342 572H222c-16.6 0-30-13.4-30-30s13.4-30 30-30h90v-90c0-16.6 13.4-30 30-30s30 13.4 30 30v120c0 16.6-13.4 30-30 30z"
           p-id="1407"></path></svg>
        <span class="fontd tabbar-nav-word">待收获</span>
      </span>
        </nut-badge>
      </a>

      <a class="tabbar-nav card">
        <nut-badge :value="otherData.pj" class="item">
      <span class="icon-box"><!---->
        <svg t="1608184594655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1542" width="15" height="15"><path d="M772 902H232c-60.7 0-110-49.3-110-110V252c0-60.7 49.3-110 110-110h330c16.6 0 30 13.4 30 30s-13.4 30-30 30H232c-27.6 0-50 22.4-50 50v540c0 27.6 22.4 50 50 50h540c27.6 0 50-22.4 50-50V462c0-16.6 13.4-30 30-30s30 13.4 30 30v330c0 60.7-49.3 110-110 110z"
            p-id="1543"></path><path d="M582 612H442c-16.6 0-30-13.4-30-30V442c0-8 3.2-15.6 8.8-21.2l290-290c11.7-11.7 30.7-11.7 42.4 0l140 140c11.7 11.7 11.7 30.7 0 42.4l-290 290c-5.6 5.6-13.2 8.8-21.2 8.8z m-110-60h97.6l260-260-97.6-97.6-260 260V552z"
            p-id="1544"></path></svg>
       <span class="tabbar-nav-word">待评价</span>
      </span>
        </nut-badge>
      </a>

      <a class="tabbar-nav card">
        <nut-badge :value="0" class="item">
      <span class="icon-box"><!---->
        <svg t="1608184684186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1679" width="20" height="20"><path d="M512 462c-7.7 0-15.4-2.9-21.2-8.8l-80-80c-11.7-11.7-11.7-30.7 0-42.4s30.7-11.7 42.4 0l58.8 58.8 58.8-58.8c11.7-11.7 30.7-11.7 42.4 0s11.7 30.7 0 42.4l-80 80c-5.8 5.9-13.5 8.8-21.2 8.8z"
            p-id="1680"></path><path d="M612 502H412c-16.6 0-30-13.4-30-30s13.4-30 30-30h200c16.6 0 30 13.4 30 30s-13.4 30-30 30z m0 100H412c-16.6 0-30-13.4-30-30s13.4-30 30-30h200c16.6 0 30 13.4 30 30s-13.4 30-30 30z"
            p-id="1681"></path><path d="M512 702c-16.6 0-30-13.4-30-30V472c0-16.6 13.4-30 30-30s30 13.4 30 30v200c0 16.6-13.4 30-30 30z m369.9-207.1c-4.1 0-8.3-0.9-12.3-2.6l-59.4-26.7c-15.1-6.8-21.9-24.5-15.1-39.7 6.8-15.1 24.5-21.9 39.7-15.1l37.5 16.9 23.4-31.1c10-13.2 28.8-15.9 42-5.9s15.9 28.8 5.9 42l-37.8 50.2c-5.7 7.7-14.7 12-23.9 12z"
            p-id="1682"></path><path d="M871.8 455.6c-13.6 0-25.8-9.2-29.1-23-43.8-182.3-227.7-295-410-251.2-113 27.1-203.3 108.9-241.7 218.7-5.5 15.6-22.6 23.9-38.2 18.4-15.6-5.5-23.9-22.6-18.4-38.2 21.7-62 58.7-118.3 106.9-162.8 49.8-45.9 111.2-78.6 177.4-94.5 52.5-12.6 105.9-14.5 158.7-5.8 51 8.5 99.3 26.5 143.6 53.7s82.3 62 113 103.6c31.8 43.1 54.3 91.6 66.9 144.1 3.9 16.1-6.1 32.3-22.2 36.2-2.3 0.6-4.6 0.8-6.9 0.8zM104.3 639.3c-6.3 0-12.6-2-18-6-13.2-10-15.9-28.8-5.9-42l37.8-50.2c8.4-11.2 23.5-15.1 36.3-9.3l59.4 26.7c15.1 6.8 21.9 24.5 15.1 39.7-6.8 15.1-24.5 21.9-39.7 15.1l-37.5-16.9-23.4 31.1c-6 7.7-15 11.8-24.1 11.8z"
            p-id="1683"></path><path d="M511.8 912.1c-21.7 0-43.5-1.8-65.1-5.4-51-8.5-99.3-26.5-143.6-53.7-44.3-27.1-82.3-62-113-103.6-31.8-43.1-54.3-91.6-66.9-144.1-3.9-16.1 6.1-32.3 22.2-36.2 16.1-3.9 32.3 6.1 36.2 22.2 43.8 182.3 227.7 295 410 251.2 113-27.1 203.3-108.9 241.7-218.7 5.5-15.6 22.6-23.9 38.2-18.4 15.6 5.5 23.9 22.6 18.4 38.2-21.7 62-58.7 118.3-106.9 162.8-50 46-111.4 78.6-177.6 94.5-31 7.5-62.3 11.2-93.6 11.2z"
            p-id="1684"></path></svg>
       <span class="tabbar-nav-word">待售后</span>
      </span>
        </nut-badge>
      </a>

      <div class="kh"></div>

      <a class="tabbar-nav card">
        <nut-badge :value="0" class="item">
      <span class="icon-box"><!---->
       <svg t="1608604643792" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3193" width="200" height="200"><path d="M496 704H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32s-14.4-32-32-32z m160-160H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h288c17.6 0 32-14.4 32-32s-14.4-32-32-32z m0-160H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h288c17.6 0 32-14.4 32-32s-14.4-32-32-32z"
           p-id="3194"
           fill="#d81e06"></path><path d="M720 144h-22.4c-12.8-36.8-48-64-89.6-64H416c-41.6 0-76.8 27.2-89.6 64H304c-88 0-160 72-160 160v480c0 88 72 160 160 160h416c88 0 160-72 160-160V304c0-88-72-160-160-160z m-304 0h192c17.6 0 32 14.4 32 32s-14.4 32-32 32H416c-17.6 0-32-14.4-32-32s14.4-32 32-32z m400 640c0 52.8-43.2 96-96 96H304c-52.8 0-96-43.2-96-96V304c0-52.8 43.2-96 96-96h22.4c12.8 36.8 48 64 89.6 64h192c41.6 0 76.8-27.2 89.6-64H720c52.8 0 96 43.2 96 96v480z"
           p-id="3195"
           fill="#d81e06"></path></svg>
       <span class="tabbar-nav-word">我的订单</span>
      </span>
        </nut-badge>
      </a>
    </div>

  </div>
</template>

<script>
import axios from "../../node_modules/axios"

export default {
  name: "me",
  components: {},
  data() {
    return {
      dialogShow: false,
      user: {
        userid: this.$cookies.get("userid"),
        Avatar: this.$cookies.get("avatar"),
        nikeName: this.$cookies.get("nikeName")
      },
      data: {},
      otherData: {
        fk: 0,
        sh: 0,
        pj: 0,
        shh: 0
      },
    }
  },
  methods: {
    onOkBtn(){
      this.$router.push("/");
      this.$cookies.remove('username');
      this.$cookies.remove('token');
      this.$cookies.remove('userid');
      this.$cookies.remove('nikeName');
      this.$cookies.remove('sex');
      this.$cookies.remove('avatar');
      this.$notify.primary('退出成功');

      this.dialogShow=false;
    },
    tuichu(){
      this.dialogShow=true;
    },
    tabSwitch1: function (value, index) {

    },
    getUserOrder() {
      const param = new URLSearchParams();
      param.append("userId", this.$cookies.get('userid'));
      axios.get("/order/selectByUserId", {'params': param}).then(
          res => {
            this.data = res.data.data;
            const data1 = res.data.data;
            for (let i = 0; i < data1.order.length; i++) {
              let state = data1.order[i].state;
              if (state == 0) {
                this.otherData.sh++;

              } else if (state == 1) {
                this.otherData.sh++;

              } else if (state = 2) {
                this.otherData.fk++;
              } else if (state = 3) {
                this.otherData.sh++;
              }
            }
            this.otherData.pj = data1.unCoo.length;

          }
      )
    },
    init() {

    },
    goLogin() {
      if (this.$cookies.get('userid') == null) {
        this.$router.push('/login')
      } else {
        return;
      }
    }
  },
  mounted() {
    if (this.$cookies.get('userid') == null) {
      this.user.nikeName = '未登录';
    } else {
      this.getUserOrder();
    }
  },


}

</script>

<style scoped>

.topdiv div * {
  vertical-align: middle;
}

.topdiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  margin: 10px auto;

}

>>> .icon {
  width: 24px;
  height: 24px;
}

.shMain {
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}


>>> .card {
  border: 0px;
}

.headerBe {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
  background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  position: fixed;
  top: 0;
  left: -25%;
  height: 9rem;
  width: 150%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  z-index: -200;
}

.meMain {
  padding: 15px;
}

>>> .nut-badge sup {
  border: 2px solid #f0250f;
  border-radius: 50px;
  font-weight: bolder;
  font-size: 13px;
  transform: translateY(-50%) translateX(80%) scale(0.8);
}

.kh {
  color: white;
  box-shadow:-2px 0px 3px #cdcdcd;
  width: 2px;
  height: 80%;
}


</style>
